<template>
  <div class="login" >
    <div class="login-content">
      <div class="modal">
        <el-form style="margin-top:-80px;"
        status-icon
        :rules="rules"
        :model="user"
        ref="loginForm"
        >
          <div class="login-title" style="margin-left: -15px;font-size: 25px;display: flex;justify-content: center;">
            <img style="width: 90px;" src="https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/甲壳虫.png" alt="">
            &nbsp;&nbsp;
            <span style="margin-top: 20px;font-size: 35px; color:#fff;">登录</span>
          </div>
          <br>
          <el-form-item prop="username" size="large">
            <el-input type="text" class="login-admin" v-model="user.username" placeholder="账号......" prefix-icon="user" @keyup.enter="enter1" ref="username">
            </el-input>
          </el-form-item>
          <el-form-item prop="password"  size="large">
            <el-input type="password" class="login-password" v-model="user.password" placeholder="密码......" prefix-icon="lock" ref="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :type="data.buttonType" circle :icon="data.buttonIcon" v-on:click="logClick"
            style="
            height: 60px;
            width: 60px;
            left: 50%;
            position: absolute;
            transform: translate(-50%,60%);
            font-size: 25px;">
            </el-button>
            <el-button type="primary" round v-on:click="toRegister"
            style="
            height: 60px;
            width: 120px;
            left: 80%;
            position: absolute;
            transform: translate(-50%,60%);
            font-size: 18px;
            font-weight: 300px;">
            注册
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { login } from '@/api/system'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
const router = useRouter()
// data
const data = ref({
  buttonType: 'success',
  buttonIcon: 'check'
})
const user = reactive({
  username: '',
  password: ''
})
const rules = reactive({
  username: [
    { required: true, message: '请输入正确的账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入正确的密码', trigger: 'change' }
  ]
})
const username = ref()
const password = ref()
const loginForm = ref(null)
// methods
const toRegister = () => {
  router.push('register')
}
const logClick = () => {
  // 进行提交前校验
  loginForm.value.validate((valid) => {
    if (valid) {
      login(user).then((res) => {
        console.log(res)
        if (res.code === 1) {
          router.push('/')
          console.log(res.user.data[0]._id);
          localStorage.setItem('userId',res.user.data[0]._id)
        } else if(res.code === 0){
          data.value.buttonType = 'danger'
          data.value.buttonIcon = 'close'
          ElNotification({
            title: '登录失败',
            message: '账户名错误 或 未注册',
            type: 'error',
          })
        } else if(res.code === -1){
          data.value.buttonType = 'danger'
          data.value.buttonIcon = 'close'
          ElNotification({
            title: '登录失败',
            message: '密码错误',
            type: 'error',
          })
        }
      })
    } else {
      return false
    }
  })
}
const enter1 = function () {
  console.log('username失焦,password获得焦点')
  // username.value.$refs.input.blur()
  password.value.$refs.input.focus()
}
</script>
<style scoped lang="scss">
.login{
  position: absolute;
  top: 0;left:0;bottom: 0;right: 0;
  background-image: url("/img/landing-large.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;
}
.login-content{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 450px;
  background-image: url("/img/auth-widget-background.jpg");
}
.modal{
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-form-item{
  width: 320px;
}
:deep(.el-input__wrapper){
  border-radius: 30px;
  height: 47px;
}
.login-admin{
  margin-top: 20px;
}
.login-title{
  margin-top: 40px;
}
</style>
